<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" pageEncoding="UTF-8"/>
  <head>
    <style>
      * {
          color:#7F7F7F;
          font-family:Arial,sans-serif;
          font-size:12px;
          font-weight:normal;
      }    
    </style>
    
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../jquery-barcode.js"></script>
    <script type="text/javascript">
	   var datas=[
	   {code:"001022002521548",name:"MacBook(13.3英寸  内存8G)",stardate:"2016-05-28"},
	   {code:"001022002521549",name:"MacBook(13.4英寸  内存8G)",stardate:"2016-05-28"},
	   {code:"001022002521559",name:"MacBook(13.5英寸  内存8G)",stardate:"2016-05-28"},
	   {code:"001022002521533",name:"MacBook(13.6英寸  内存8G)",stardate:"2016-05-28"},
	   {code:"001022002521545",name:"MacBook(13.7英寸  内存8G)",stardate:"2016-05-28"},
	   {code:"001022002521588",name:"MacBook(13.8英寸  内存8G)",stardate:"2016-05-28"},
	   {code:"001022002521598",name:"MacBook(13.9英寸  内存8G)",stardate:"2016-05-28"},
	   {code:"001022002521533",name:"MacBook(13.10英寸  内存8G)",stardate:"2016-05-28"},
	   ];
      function generateBarcode(string_id,code){
        var code = code;
		var name = $("input[name=name]").val();
		var startdate = $("input[name=startdate]").val();
        var btype = "code128";
        var renderer = "css";
        
        var settings = {
          output:renderer,
          bgColor: "#fffff",
          color: "#000000",
          barWidth: "2",
          barHeight: "50",
          moduleSize: "5",
          posX: "10",
          posY: "20",
          addQuietZone: "1"
        };
        $("#"+string_id).html("").show().barcode(code, btype, settings);
		
		$(".assetName").text(name);
		$(".assetDate").text(startdate);
      }

      $(function(){
        //generateBarcode();
		
		 $(".submit").click(function(){
				//generateBarcode();
		  });
		  
		$.each(datas,function(index,event){
			var html=$(".scantext").find("li").clone();
			var string_id="barcodeTarget"+index;
			html.find(".assetName").text(event.name);
			html.find(".stardate").text(event.stardate);
			html.find(".barcodeTarget").attr("id",string_id);
			
			$(".b_body").find("ul").append(html);
			generateBarcode(string_id,event.code);
			
			if(index!=0){
				$(".b_body").find("ul li:eq("+index+")").addClass("hide");
			}
		});
		
		//print scanning
		$(".dayin").click(function(){
			$(".b_body>ul>li").each(function(index,event){
				var isTrue=false;
				setTimeout(function(){
					$(event).removeClass("hide");
					$(event).siblings().addClass("hide");
					console.log(index);
					<!--write print code function-->
					//jqueryAreaPrint();
					
					return true;
				},1000);
				if(isTrue)return false;
			});
		});
      });
	  
    </script>
  </head>
  <body>
  <div>
	<input type="button" value="打印条形码" class="dayin"/>
  </div>
   <div class="b_body">
		<ul>
			<!--这里append条形码-->
		</ul>
   </div>

	<ul class="scantext" style="display:none;">
		<li>
			<div class="b_content">
				<div class="bc_info">
					<table class="tb_info">
						<tr>
							<td>
								<img src="scanning.jpg" />
							</td>
							<td>
								<label>资产名称：</label>
								<p class="assetName">MacBook(13.3英寸  内存8G)</p>
								<label>启动时间：</label>
								<p class="assetDate">2016-05-28</p>
							</td>
						</tr>
					</table>
				</div>
				<div id="barcodeTarget" class="barcodeTarget"></div>
			</div>
		</li>
	</ul>
	
	<style>
		.b_content{
		  width: 300px;
		  height: 200px;
		  border: 1px solid #ddd;
		  margin: 0px auto;
		  margin-top: 8%;
		  background-color: #f6f6f6;
		}
		
		.bc_info{
			height:120px;
		}
		
		.tb_info{
			width:100%;
		}
		.tb_info td{
			padding:10px;
		}
		.tb_info td:nth-of-type(1){
			width:40%;
			height:100%;
		}
		.tb_info td:nth-of-type(2){
			width:60%;
			height:100%;
		}
		.tb_info label,.tb_info p{
			font-weight:600;
			color:#000;
			margin:10px 0px;
		}
		
		.tb_info label{
			font-size:15px;
		}
		.hide{
			display:none;
		}
		
	</style>
  </body>
</html>